// const path = require("path")
const { resolve } = require("path");
const merge = require("webpack-merge");
const { bases } = require("./webpack.base");
const webpack = require("webpack");
const BasicPlugin = require("./plugins/index");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const DefinePlugin = require("webpack/lib/DefinePlugin");
// const NamedModulesPlugin = require("webpack/lib/NamedModulesPlugin");
module.exports = merge(bases, {
  // webpack基于node构建的
  mode: "development", // production
  watchOptions: {
    poll: 1000,
    // aggregateTimeOut: 500,
    ignored: /node_modules/
  },
  // resolveLoader: {
  //   // 去哪些目录下寻找 Loader，有先后顺序之分
  //   modules: ["node_modules", "./loader/"],
  // },
  entry: [
    "webpack-hot-middleware/client?onInfo=true&reload=true",
    "./src/main.js"
  ],
  output: {
    filename: "main.[name].js", // 通过热加载输出script文件挂载在目录与index.HTML一样
    path: resolve(process.cwd(), "dist")
  },
  module: {
    rules: [
      {
        test: /\.(s[ac]|c)ss$/i,
        use: [
          "style-loader",
          // MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",

          "sass-loader"
        ]
      },
      {
        test: /.liu$/i,
        loader: "./liu-cli/loader/liu.js"
      }
    ]
  },
  watchOptions: {
    // 不监听的 node_modules 目录下的文件
    ignored: /node_modules/
  },
  // production 提供了约定大于配置 约定打包文件是src/index ->dist/main
  devServer: {
    host: "http://localhost",
    port: 7000,
    hot: true,
    grogress: true,
    historyApiFallback: true
    // true 表示webpack支持使用history false路由默认是hash
  },
  devtool: "cheap-module-source-map",
  performance: {
    hints: "warning", // false关闭提示 下面设置就没必要了
    // 入口起点的最大体积
    maxEntrypointSize: 50000000,
    // 生成文件的最大体积
    maxAssetSize: 30000000,
    // 只给出 js 文件的性能提示
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith(".js");
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new BasicPlugin(),
    new SpeedMeasurePlugin()
    // new NamedModulesPlugin()
    // new DefinePlugin({
    //   // Webpack 就自动打包进 process 模块的代码以支持非 Node.js 的运行环境。 当你的代码中没有使用 process 时就不会打包进 process 模块的代码。这个注入的 process 模块作用是为了模拟 Node.js 中的 process
    //   // 定义 NODE_ENV 环境变量为 development
    //   "process.env": {
    //     NODE_ENV: JSON.stringify("development"),
    //   },
    // }),
    // new webpack.EnvironmentPlugin({
    //   NODE_API: "/dev-api",
    // }),
  ]
});
// 为了解决以上两个问题，可以这样做：

// 在开发环境下把 devtool 设置成 cheap-module-eval-source-map，因为生成这种 Source Map 的速度最快，能加速构建。由于在开发环境下不会做代码压缩，Source Map 中即使没有列信息也不会影响断点调试；
// 在生产环境下把 devtool 设置成 hidden-source-map，意思是生成最详细的 Source Map，但不会把 Source Map 暴露出去。由于在生产环境下会做代码压缩，一个 JavaScript 文件只有一行，所以需要列信息。
// 在生产环境下通常不会把 Source Map 上传到 HTTP 服务器让用户获取，而是上传到 JavaScript 错误收集系统，在错误收集系统上根据 Source Map 和收集到的 JavaScript 运行错误堆栈计算出错误所在源码的位置。

// 不要在生产环境下使用 inline 模式的 Source Map， 因为这会使 JavaScript 文件变得很大，而且会泄露源码。
